<template>
  <div class="detail-container">
    <el-card shadow="never">
      <span class="font-title-medium">退货商品</span>
      <el-table
        border
        class="standard-margin"
        ref="productTable"
        :data="returnCommodityList">
        <el-table-column label="商品图片" width="160" align="center">
          <template slot-scope="scope">
            <img style="height:80px" :src="scope.row.productPic">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <span class="font-small">{{scope.row.commodityName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="180" align="center">
          <template slot-scope="scope">
            <span class="font-small">￥{{scope.row.commodityPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="数量" width="100" align="center">
          <template slot-scope="scope">{{scope.row.commodityNums}}</template>
        </el-table-column>
        <el-table-column label="小计" width="100" align="center">
          <template slot-scope="scope">￥{{scope.row.commodityTotalAmount}}</template>
        </el-table-column>
      </el-table>
      <div style="float:right;margin-top:15px;margin-bottom:15px">
        <span class="font-title-medium">合计：</span>
        <span class="font-title-medium color-danger">￥{{returnData.returnAmount}}</span>
      </div>
    </el-card>

    <el-card shadow="never" class="standard-margin">
      <span class="font-title-medium">售后单信息</span>
      <div class="form-container-border">
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small">售后单号</el-col>
          <el-col class="form-border font-small" :span="18">{{returnData.returnSn}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col>
          <el-col class="form-border font-small" :span="18">{{returnData.status | formatStatus}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg font-small" style="height:50px;line-height:30px">订单编号
          </el-col>
          <el-col class="form-border font-small" :span="18" style="height:50px">
            {{returnData.order.orderSn}}

            <el-button type="text" style="margin-left:10px" size="small" @click="handleViewOrder">查看</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col>
          <el-col class="form-border font-small" :span="18">{{returnData.createTime}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">用户账号</el-col>
          <el-col class="form-border font-small" :span="18">{{returnData.user.account}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">联系人</el-col>
          <el-col class="form-border font-small" :span="18">{{returnData.contactName}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
          <el-col class="form-border font-small" :span="18">{{returnData.contactPhone}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">退货原因</el-col>
          <el-col class="form-border font-small" :span="18">{{returnData.returnReason}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">问题描述</el-col>
          <el-col class="form-border font-small" :span="18">{{returnData.returnNotes}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">凭证图片
          </el-col>
          <el-col class="form-border font-small" :span="18" style="height:100px">
          </el-col>
        </el-row>
      </div>
      <div class="form-container-border" v-show="returnData.returnStatus===0">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
          <el-col class="form-border font-small" :span="18">￥{{returnData.order.orderAmount}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">确认退款金额
          </el-col>
          <el-col class="form-border font-small" style="height:52px" :span="18">
            ￥
            <el-input onkeyup="value=value.replace(/[^\d]/g,'')" size="small" v-model="updateStatusParam.returnAmount"
                      style="width:200px;margin-left: 10px"></el-input>
          </el-col>
        </el-row>
      </div>
      <div class="form-container-border" v-show="returnData.returnStatus===0">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">处理备注</el-col>
          <el-col class="form-border font-small" :span="18" style="height:100px;line-height:80px">
            <el-input  type="textarea" v-model="updateStatusParam.handleNotes" style="height:100px; width:650px;margin-left: 10px"></el-input>
          </el-col>
        </el-row>
      </div>
      <div class="form-container-border" v-show="returnData.returnStatus===2">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
          <el-col class="form-border font-small" :span="18">￥{{returnData.order.orderAmount}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">退款金额</el-col>
          <el-col class="form-border font-small" :span="18">￥ {{returnData.returnAmount | number_format}}</el-col>
        </el-row>
      </div>
      <div class="form-container-border" v-show="returnData.returnStatus===2">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">处理备注</el-col>
          <el-col class="form-border font-small" :span="18" style="height:100px;line-height:80px">{{returnData.returnNotes}}</el-col>
        </el-row>
      </div>

      <div class="form-container-border" v-show="returnData.returnStatus===1">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
          <el-col class="form-border font-small" :span="18">￥{{returnData.order.orderAmount}}</el-col>
        </el-row>
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6">退款金额</el-col>
          <el-col class="form-border font-small" :span="18">￥ 0.00</el-col>
        </el-row>
      </div>
      <div class="form-container-border" v-show="returnData.returnStatus===1">
        <el-row>
          <el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">处理备注</el-col>
          <el-col class="form-border font-small" :span="18" style="height:100px;line-height:80px">{{returnData.returnNotes}}</el-col>
        </el-row>
      </div>

      
      <div style="margin-top:15px;text-align: center" v-show="returnData.returnStatus===0">
        <el-button type="primary" size="small" @click="agreeReturn">同意售后</el-button>
        <el-button type="danger" size="small" @click="disagreeReturn">拒绝售后</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>

import {formatDate} from '@/utils/date';
import {number_format} from '@/filters/money-filter'

export default {
    data () {
        return {
            returnData: {},
            returnCommodityList: [],
            updateStatusParam: {
                handleNotes: '',
                returnAmount: ''
            }
        }
    },

    created () {
      this.returnData = this.$route.query.returnData;
      console.log(this.returnData)
      this.getReturnCommodityList()
    },

    filters: {
        formatStatus(status) {
        if (status === 0) {
          return "待处理";
        } else if (status === 1) {
          return "已拒绝";
        } else {
          return "已完成";
        }
      },
    },

    methods: {
        getReturnData() {
            this.$http({
            url: this.$http.adornUrl(`/order/return/info/${this.returnData.returnId}`),
            methods: 'get',
            params: this.$http.adornParams()
            }).then(({data}) => {
            if (data && data.code===0) {
                this.returnData = data.returnInfo
            }
            })
        },

        getReturnCommodityList() {
            this.$http({
            url: this.$http.adornUrl('/order/commodity/list'),
            method: 'get',
            params: this.$http.adornParams({
            'page': 1,
            'limit': 10,
            'orderId': this.returnData.orderId,
            'isReturn': 1
            })
            }).then(({data}) => {
            if (data && data.code === 0) {
                this.returnCommodityList = data.page.list
            }
            else {
                this.returnCommodityList = []
            }
            })
        },

        handleViewOrder(){
        this.$router.push({path:'/orderDetail',query:{id:this.returnData.orderId}});
      },

        agreeReturn() {
            let date = new Date();
            let handleTime = formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            console.log(handleTime)
            this.$http({
            url: this.$http.adornUrl('/order/return/update'),
            method: 'post',
            data: this.$http.adornData({
              'returnId': this.returnData.returnId,
              'returnAmount': this.updateStatusParam.returnAmount,
              'handleNotes': this.updateStatusParam.handleNotes,
              'returnStatus': 2,
              'handleTime': handleTime,
              'updateTime': handleTime
            })
          }).then(({data}) => {
            if (data && data.code===0) {
              this.getReturnData();
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 800,
              })
              this.markOrderDialogVisible = false;
            } else {
              this.$message.error(data.msg);
            }
          })
        },

        disagreeReturn() {
            let date = new Date();
            let handleTime = formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            console.log(handleTime)
            this.$http({
            url: this.$http.adornUrl('/order/return/update'),
            method: 'post',
            data: this.$http.adornData({
              'returnId': this.returnData.returnId,
              'returnAmount': 0,
              'handleNotes': this.updateStatusParam.handleNotes,
              'returnStatus': 1,
              'handleTime': handleTime,
              'updateTime': handleTime
            })
          }).then(({data}) => {
            if (data && data.code===0) {
              this.getReturnData();
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 800,
              })
              this.markOrderDialogVisible = false;
            } else {
              this.$message.error(data.msg);
            }
          })
        }
    }
}
</script>

<style>
  .detail-container {
    /* position: absolute; */
    left: 0;
    right: 0;
    width: 1080px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
  }
  .standard-margin {
    margin-top: 15px;
  }
  .form-border {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
  }
  .form-container-border {
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
    margin-top: 15px;
  }
  .form-left-bg {
    background: #F2F6FC;
  }
</style>